<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.8.0 -->
<title>0070: Statusbar Part I – Statusbar Basics | gtkDcoding</title>
<meta name="generator" content="Jekyll v4.3.4" />
<meta property="og:title" content="0070: Statusbar Part I – Statusbar Basics" />
<meta name="author" content="Ron Tarrant" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="GTK Tutorial covering the basics of using a Statusbar." />
<meta property="og:description" content="GTK Tutorial covering the basics of using a Statusbar." />
<link rel="canonical" href="http://localhost:4000/posts/0070-statusbar.html" />
<meta property="og:url" content="http://localhost:4000/posts/0070-statusbar.html" />
<meta property="og:site_name" content="gtkDcoding" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2019-09-13T00:00:00-04:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="0070: Statusbar Part I – Statusbar Basics" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"Ron Tarrant"},"dateModified":"2019-09-13T00:00:00-04:00","datePublished":"2019-09-13T00:00:00-04:00","description":"GTK Tutorial covering the basics of using a Statusbar.","headline":"0070: Statusbar Part I – Statusbar Basics","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/posts/0070-statusbar.html"},"url":"http://localhost:4000/posts/0070-statusbar.html"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="../assets/main.css">
  <link rel="stylesheet" href="../css/style.css" /><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="gtkDcoding" /></head>
<body><header class="site-header" role="banner">

  <div class="wrapper"><a class="site-title" rel="author" href="../">gtkDcoding</a><nav class="site-nav">
        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
        <label for="nav-trigger">
          <span class="menu-icon">
            <svg viewBox="0 0 18 15" width="18px" height="15px">
              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
            </svg>
          </span>
        </label>

        <div class="trigger"><a class="page-link" href="../about.html">About</a><a class="page-link" href="../index-reverse.html">Posts in Date Order</a><a class="page-link" href="../topics.html">Blog Posts by Topic</a></div>
      </nav></div>
</header>
<main class="page-content" aria-label="Content">
      <div class="wrapper">
        <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
	<header class="post-header">
		<link rel="stylesheet" href="../css/font_size.css" />
		<link rel="stylesheet" href="../css/figure.css" />
		<link rel="stylesheet" href="../css/topics/bar.css" />  <!-- sub in the tag/topic -->
		<link rel="stylesheet" href="../css/modal.css" />
		<link rel="stylesheet" href="../css/post.css" />
		<link rel="stylesheet" href="../css/mascot_effects.css" />

		
		
		<p class="post-meta">
		<time class="dt-published" datetime="2019-09-13T00:00:00-04:00" itemprop="datePublished">Friday, September 13, 2019
		</time>• by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">Ron Tarrant</span></span></p>
	</header>

	<div class="post-content e-content" itemprop="articleBody">
		<div class="skew-line"></div>
		<h1 id="0070-statusbar-part-i--statusbar-basics">0070: Statusbar Part I – Statusbar Basics</h1>

<!-- 0, 1 -->
<!-- first occurrence of application and terminal screen shots on a single page -->
<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img0" src="../images/screenshots/bar_03.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal0" class="modal">																	<!-- modal# -->
				<span class="close0">&times;</span>															<!-- close# -->
				<img class="modal-content" id="img00" />															<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal0");														// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img0");															// img#
			var modalImg = document.getElementById("img00");													// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close0")[0];											// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img1" src="../images/screenshots/bar_03_term.png" alt="Current example terminal output" />		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal1" class="modal">																				<!-- modal# -->
				<span class="close1">&times;</span>																		<!-- close# -->
				<img class="modal-content" id="img11" />																		<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal1");																	// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img1");																		// img#
			var modalImg = document.getElementById("img11");																// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close1")[0];														// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																								<!-- ------------- filename (below) --------- -->
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/bar_03_statusbar.d" target="_blank">here</a>.
	</div>
</div>
<!-- end of snippet for first (1st) occurrence of application and terminal screen shots on a single page -->

<p>The <code class="language-plaintext highlighter-rouge">Statusbar</code> is a simple widget, but to demonstrate it, we need something else going on, something that might have a status that needs to be reported. To that end, I borrowed from two previous examples:</p>

<ul>
  <li>filling a <code class="language-plaintext highlighter-rouge">DrawingArea</code> (from <a href="https://github.com/rontarrant/gtkd_demos/blob/master/018_cairo/cairo_01_fill_surface.d">cairo_01_fill_surface.d</a>), and</li>
  <li>tracking the mouse (from <a href="https://github.com/rontarrant/gtkd_demos/blob/master/005_mouse/mouse_04_tracker.d">mouse_04_tracker.d</a>).</li>
</ul>

<p>In this example, mouse movements over the <code class="language-plaintext highlighter-rouge">DrawingArea</code> are reported in the <code class="language-plaintext highlighter-rouge">Statusbar</code>. And the most complex part of this example isn’t the <code class="language-plaintext highlighter-rouge">Statusbar</code> itself, but the communication between widgets… not that it’s complicated, just more so than any other part of this code.</p>

<h2 id="the-mystatusbar-class">The MyStatusbar Class</h2>

<p>We only need a few lines to get a working <code class="language-plaintext highlighter-rouge">Statusbar</code>:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="n">MyStatusbar</span> <span class="p">:</span> <span class="n">Statusbar</span>
<span class="p">{</span>
	<span class="kt">uint</span> <span class="n">contextID</span><span class="p">;</span>
	<span class="nb">string</span> <span class="n">contextDescription</span> <span class="p">=</span> <span class="s">"Mouse position within the DrawingArea"</span><span class="p">;</span>
	
	<span class="k">this</span><span class="p">()</span>
	<span class="p">{</span>
		<span class="n">contextID</span> <span class="p">=</span> <span class="n">getContextId</span><span class="p">(</span><span class="n">contextDescription</span><span class="p">);</span>
		
	<span class="p">}</span> <span class="c1">// this()</span>

<span class="p">}</span> <span class="c1">// class MyStatusBar</span>
</code></pre></div></div>

<h3 id="context">Context</h3>

<p>Because your application might have a bunch of things going on at the same time—for instance, a drawing application might keep the user informed of mouse position (as in this example) but it might also report on the currently-selected color—you can categorize these things by context.</p>

<p>Each context needs:</p>

<ul>
  <li>a description of the status category (a string, in other words), and</li>
  <li>a context ID associated with that description.</li>
</ul>

<p>The context ID isn’t hard to get, just throw a context description at the <code class="language-plaintext highlighter-rouge">getContextID()</code> function and it’ll give back a context ID. Need a second context ID? Throw it another string description and Bob’s your uncle.</p>

<p>This system means that a single <code class="language-plaintext highlighter-rouge">Statusbar</code> can deal with as many contexts as you’re willing to describe.</p>

<p>Although we might assume that the description needs to be elaborate, as it is in this example—I did this just to show the lack of limitations—it’s actually for internal use by your app, the only requirement is that each description be unique, but we’ll talk more about that when the time comes.</p>

<h3 id="the-drawingarea-being-reported-on">The DrawingArea being Reported On</h3>

<p>We’ve seen most of the <code class="language-plaintext highlighter-rouge">DrawingArea</code> class code before in the <a href="../topics.html#cairo"><em>Cairo</em> examples</a>. One thing of note here, though, is that the <code class="language-plaintext highlighter-rouge">DrawingArea</code> is passed a pointer to the <code class="language-plaintext highlighter-rouge">Statusbar</code> so as to allow communication between them. And to do this, the <code class="language-plaintext highlighter-rouge">DrawingArea</code> constructor adds a second signal:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>this(MyStatusbar myStatusbar)
{
	_myStatusbar = myStatusbar;

	setSizeRequest(640, 360);

	addOnDraw(&amp;onDraw);
	addOnMotionNotify(&amp;onMotion); // track mouse movements
	
} // this()
</code></pre></div></div>

<p>The call to <code class="language-plaintext highlighter-rouge">addOnMotionNotify()</code> (borrowed from <a href="https://github.com/rontarrant/gtkd_demos/blob/master/005_mouse/mouse_04_tracker.d">the mouse example mentioned above</a>) brings a second callback into play:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">public</span> <span class="kt">bool</span> <span class="n">onMotion</span><span class="p">(</span><span class="n">Event</span> <span class="n">event</span><span class="p">,</span> <span class="n">Widget</span> <span class="n">widget</span><span class="p">)</span>
<span class="p">{</span>
	<span class="k">if</span><span class="p">(</span><span class="n">event</span><span class="p">.</span><span class="n">type</span> <span class="p">==</span> <span class="n">EventType</span><span class="p">.</span><span class="n">MOTION_NOTIFY</span><span class="p">)</span>
	<span class="p">{</span>
		<span class="n">_myStatusbar</span><span class="p">.</span><span class="n">push</span><span class="p">(</span><span class="n">_myStatusbar</span><span class="p">.</span><span class="n">contextID</span><span class="p">,</span> <span class="s">"Mouse position: "</span> <span class="p">~</span> <span class="n">format</span><span class="p">(</span><span class="s">"%s, %s"</span><span class="p">,</span> <span class="n">event</span><span class="p">.</span><span class="n">motion</span><span class="p">.</span><span class="n">x</span><span class="p">,</span> <span class="n">event</span><span class="p">.</span><span class="n">motion</span><span class="p">.</span><span class="n">y</span><span class="p">));</span>
	<span class="p">}</span>

	<span class="k">return</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
		
<span class="p">}</span> <span class="c1">// onMotion()</span>
</code></pre></div></div>

<p>This is the meat-n-taters of our example right here. A call to the <code class="language-plaintext highlighter-rouge">Statusbar</code>’s <code class="language-plaintext highlighter-rouge">push()</code> function puts the mouse movement report onto the <code class="language-plaintext highlighter-rouge">Statusbar</code>’s message stack and automatically displays it in the <code class="language-plaintext highlighter-rouge">Statusbar</code> at the same time. The <code class="language-plaintext highlighter-rouge">format()</code> function is here just to supply window dressing for the string we’re passing along.</p>

<p><em>Note: The <code class="language-plaintext highlighter-rouge">format()</code> function uses <code class="language-plaintext highlighter-rouge">%s</code> as a format specifier for the <code class="language-plaintext highlighter-rouge">double</code> values returned by <code class="language-plaintext highlighter-rouge">event.motion.x</code> and <code class="language-plaintext highlighter-rouge">event.motion.y</code>.</em></p>

<h2 id="conclusion">Conclusion</h2>

<p>Next time, we’ll talk about how to get more out of a <code class="language-plaintext highlighter-rouge">Statusbar</code> by stuffing extra widgets in there and harnessing the <code class="language-plaintext highlighter-rouge">Statusbar</code>’s <code class="language-plaintext highlighter-rouge">onTextPushed</code> signal.</p>

<p>Until then.</p>

<div class="blog-nav">
	<div style="float: left;">
		<a href="./0069-textview-and-textbuffer.html">Previous: TextView and TextBuffer</a>
	</div>
	<div style="float: right;">
		<a href="./0071-expanding-on-the-statusbar.html">Next: Expanding on the Statusbar</a>
	</div>
</div>
<p>
	<h3></h3>
<div class="inpage-frame">
	<a href="https://github.com/sponsors/rontarrant">
		<BR>
		<BR>
		<B>Is this article useful? Educational? Entertaining, perhaps?</B>
		<BR>
		<figure class="left">
			<img src="../images/favorite_32.png" alt="Sponsorship heart" style="width: 32px; height: 32px;">
		</figure>
		You're free to accept or decline this invitation to become our newest sponsor.
	</a>
</div>
	<h4 class="comment-blurb"><B>Comments? Questions? Observations?</B></h4>
	<p>
		Did we miss a tidbit of information that would make this post even more informative? Let's talk about it in the comments.
	</p>
	<script src="https://utteranc.es/client.js"
		repo="rontarrant"
		issue-term="pathname"
		theme="github-light"
		crossorigin="anonymous"
		async>
	</script>
	<ul>
		<li> come on over to the <a href="https://forum.dlang.org/">D Language Forum</a> and look for one of the <i>gtkDcoding</i> announcement posts, </li>
		<li> drop by <a href="https://forum.gtkd.org/">the <i>GtkD Forum</i></a>,</li>
		<li> follow the link below to email me, or</li>
		<li> go to the	<a href="https://www.facebook.com">gtkDcoding Facebook page.</a></li>
	</ul>
</p>
<p> You can also subscribe <a href="/feed.xml">via RSS</a> so you won't miss anything. Thank you very much for dropping by.</p>
<p>&copy; Copyright 2025 Ron Tarrant </p>
</div>

	<a class="u-url" href="./0070-statusbar.html" hidden></a>
</article>

      </div>
    </main><footer class="site-footer h-card">
  <data class="u-url" href="/"></data>

  <div class="wrapper">

    <h2 class="footer-heading">gtkDcoding</h2>

    <div class="footer-col-wrapper">
      <div class="footer-col footer-col-1">
        <ul class="contact-list">
          <li class="p-name">Ron Tarrant</li><li><a class="u-email" href="mailto:gtkDcoding@gmail.com">gtkDcoding@gmail.com</a></li></ul>
      </div>

      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/rontarrant"><svg class="svg-icon"><use xlink:href="../assets/minima-social-icons.svg#github"></use></svg> <span class="username">rontarrant</span></a></li></ul>
</div>

      <div class="footer-col footer-col-3">
        <p>Simple examples of how to use GtkD to build GUI applications.</p>
      </div>
    </div>

  </div>

</footer>
</body>

</html>
